<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<h1>省市二级联动下拉菜单</h1>
<select id="select-province">
  <option value="-1">—请选择省份—</option>
</select>
<select id="select-city">
  <option value="-1">—请选择地级市—</option>
</select>

<script src="js/jquery-1.11.3.js"></script>
<script>
  //$(document).ready(fn)
  //$().ready(fn)
  //$(fn)
  /*
   $(document).ready(function(){ console.log(1)});
   $().ready(function(){ console.log(2)});
   $(function(){ console.log(3)});
   */
  //页面加载完成后，为select填充option
  $(function () {
    var provinceList = [
      '北京市',
      '上海市',
      '浙江省'
    ];
    var cityList = [
      ['东城区', '西城区', '海淀区'],
      ['闵行区', '浦东区', '金山区'],
      ['杭州市', '宁波市', '绍兴市', '嘉兴市']
    ];
    //读取每个省份名称，生成一个option，追加到select
    var html = '';
    for (var i = 0; i < provinceList.length; i++) {
      var p = provinceList[i];
      html += `<option value="${i}">${p}</option>`;
    }
    $('#select-province').append(html);

    //为省份select添加“选项改变”事件绑定
    $('#select-province').change(function(){
      console.log($(this).val());//select的value就是当前选中的option的value
      console.log(this.value);//select的value就是当前选中的option的value
      if(this.value==='-1'){
        return; //当前用户选定了“请选择城市”
      }
      //获取当前选定的省份的地级市列表
      var cities = cityList[ this.value ];
      console.log(cities);
      var html = '<option value="-1">—请选择地级市—</option>';
      for(var i=0; i<cities.length; i++){
        var c = cities[i];
        html+=`<option value="${i}">${c}</option>`;
      }
      //$('#select-city').append(html);
      $('#select-city').html(html);
    });


  });
</script>
</body>
</html>